<template>
    <transition appear name="side_anime">
        <div>
            <div class="back">
                <el-button type="success" size="mini" @click="back">返回</el-button>
            </div>
            <h1>角色权限列表</h1>

            <div class="btn">
                <el-button icon="el-icon-plus" type="primary" size="small" @click="dialogVisible=true">编辑角色权限</el-button>
            </div>

            <!-- 角色权限列表 -->
            <el-table
            ref="mutipleTable"
            :data="rolePermissionList"
            tooltip-effect="dark"
            style="width: 100%">
                <el-table-column
                    prop="id"
                    label="角色权限ID"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="displayName"
                    label="权限名称(中文)"
                    width="180">
                </el-table-column>
                <el-table-column
                    prop="permisionName"
                    label="权限级别"
                    width="180">
                </el-table-column>
            </el-table>

            <el-dialog
                title="编辑角色权限"
                v-model="dialogVisible"
                width="20%">
                <el-tree
                    :props="defaultProps"
                    :data="permissionList"
                    show-checkbox
                    node-key="label"
                    ref="treeData"
                    :default-checked-keys="existedList"
                    @check-change="handleCheckChange">
                </el-tree>
                <div class="btn2">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="handleAdd">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </transition>
</template>

<script>
import {addStaffPermissions, check, checkStaffPermissions, removePermissions} from '../../api/api'

export default {
    inject:['reload'],
    data(){
        return {
            rolePermissionList:[],
            permissionList:[],
            dialogVisible:false,
            existedList:[],   //存储当前角色已经拥有的权限，便于回显
            currentSelection:[]   //存储新增角色权限时当前已经选的节点
        }
    },

    mounted(){
        this.getRolePermissionList();
        this.getPermissionList();
    },

    methods:{
        back() {
            this.$router.push("/homeview/roleList")
        },

        handleCheckChange(val) {
            console.log(val)
            this.currentSelection = this.$refs.treeData.getCheckedKeys()
            console.log(this.currentSelection)
            console.log(this.existedList)
        },
        //获取角色权限列表
        getRolePermissionList() {
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let header = {
                'satoken':token
            }
            let roleId = this.$route.params.id;
            let data = {
                'roleId':roleId
            }
            checkStaffPermissions(data,header).then(response => {
                console.log('请求成功',response)
                this.rolePermissionList = response.data
                this.existedList = response.data.map(t=>t.displayName)
                console.log(this.existedList)
            })
        },

        //获取所有权限以供选择添加
        getPermissionList() {
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let header = {
                'satoken':token
            }
            check(header).then(response => {
                console.log('请求成功',response)
                response.data.forEach(item => {
                    this.permissionList.push({
                        // id:item.id,
                        label:item.displayName
                    })
                })
                // this.permissionList = response.data.map(t=>t.displayName)
                console.log(this.permissionList)
            })
        },

        subSet(arr1,arr2) {
            let set1 = new Set(arr1);
            let set2 = new Set(arr2);
        
            let subset = [];
        
            for (let item of set1) {
                if (!set2.has(item)) {
                    subset.push(item);
                }
            }
            console.log(subset)
            return subset;
        },


        //增加角色权限
        handleAdd() {
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let header = {
                'satoken':token
            }
            let roleId = this.$route.params.id;
            let displayNames = this.subSet(this.currentSelection,this.existedList)
            let deleted = this.subSet(this.existedList,this.currentSelection)
            if(deleted.length !== 0){
                this.handleDelete(deleted);
            }
            console.log(displayNames)
            let data = {
                'roleId':roleId,
                'displayNames':displayNames
            }
            addStaffPermissions(data,header).then(response => {
                console.log('请求成功',response)
                if (response.code == '200'){
                    this.$message({
                        message:'修改成功',
                        type: 'success',
                        showClose:true
                    })
                    this.reload();
                }else {
                    this.$message({
                        message:'修改失败',
                        type: 'error',
                        showClose:true
                    })
                }
            })

        },

        //删除角色权限
        handleDelete(val) {
            console.log(this.multipleSelection)
            let token = this.$store.state.medicalStaff.loginData.tokenValue
            let header = {
                'satoken':token
            }
            let roleId = this.$route.params.id;
            // let deleteList = this.multipleSelection;
            let displayNames = val;
            // let str = '';
            // deleteList.forEach(function(e) {
            //     str += e.displayName + ",";
            // })
            // str = str.substring(0, str.length)
            // displayNames = str.split(",")
            // displayNames = deleteList.map(t=>t.displayName)  //将选中要删除的数据封装成数组
            let data = {
                'roleId':roleId,
                'displayNames':displayNames
            }
            console.log(data)
            removePermissions(data,header).then(response => {
                console.log('请求成功',response)
                if (response.code == '200'){
                    this.$message({
                        message:'修改成功',
                        type: 'success',
                        showClose:true
                    })
                    this.reload();
                }else {
                    this.$message({
                        message:'修改失败',
                        type: 'error',
                        showClose:true
                    })
                }
            })
        }
    }
}
</script>

<style scoped>
.side_anime-enter-from,.side_anime-leave-to{
  opacity: 1;
}

.side_anime-enter-active{
  animation: slideInLeft 1s;
}

.side_anime-leave-active{
  animation: slideOutLeft 1s;
}
.back {
  text-align: left;
  margin-bottom: 30px;
}
.btn {
    text-align: left;
    margin-bottom: 20px;
    margin-top: 20px;
}
.btn2 {
    margin-top: 30px;
}
</style>

